<template>
  <el-container>
    <el-header class="sa-header">
      <el-tabs class="sa-tabs" v-model="tabIndex" @tab-change="tabChange">
        <el-tab-pane
          v-for="(item,index) in statusList"
          :key="index"
          :label="item.name"
          :name="item.value"
        ></el-tab-pane>
      </el-tabs>

      <div v-if="tabIndex==0" class="sa-flex sa-m-t-20 sa-m-b-20">
        <template v-for="(item,index) in buttonList" :key="index">
          <div @click="btnHandle(index)" class="tag" :class="{'tag-active':btnIndex==index}">
            {{ item.name }}
            <span v-if="item.num>0">{{ item.num }}</span>
          </div>
        </template>
      </div>
      
    </el-header>
    <el-main class="sa-p-0" v-loading="table.loading">
      <!-- 铺货记录 -->
      <el-table v-if="tabIndex==0" class="sa-table" height="100%" :data="table.data" stripe>
        <template #empty>
          <sa-empty />
        </template>
        <el-table-column sortable="custom" prop="id" label="序号" min-width="80" />
        <el-table-column  label="商品信息" min-width="400" >
          <template #default="scope">
            <div class="sa-flex">
              <el-image  class="shop-image" :src="scope.row.img" fit="cover" />
              <div>
                <div class="sa-flex" style="display: block;">
                  <div class="shop-tag">供应商</div>
                  <span class="shop-title">标题标题标题标题标题标题标题标题标标题标题标题标题标题标题标题标题标</span>
                  
                </div>
                <div class="sa-m-t-5 txt">一级类目二级类目/三级类目 </div>
              </div>
            </div>
          </template>
        </el-table-column>
        
        
        <el-table-column prop="name" label="成本价" min-width="100" align="center" />
        <el-table-column prop="phone" label="库存" min-width="100" align="center" />
        <el-table-column label="铺货状态 " min-width="120" prop="" align="center">
          <template #default="scope">
            <div class="sa-flex" >
              <div class="dot"></div>
              在售
            </div>
          </template>
        </el-table-column>
       
        <el-table-column label="铺货时间" min-width="120" prop="create_time" align="center"></el-table-column>
        <el-table-column fixed="right" label="操作" min-width="120" align="center">
          <template #default="scope">
            <el-button
              class="is-link"
              type="primary"
            >查看货源
            </el-button>
            <br/>
            <el-button
              class="is-link"
              type="primary"
            >解除货源关联
            </el-button>
            <br/>

            <el-button
              class="is-link"
              type="primary"
            >删除 
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 收藏夹 -->
      <div v-if="tabIndex==1" class="sa-p-24 sa-flex collect-box">
        <template v-for="(item,index) in 1">
          <div class="collect-item">
            <el-image  class="collect-image" :src="item?.img" fit="cover" />
            <div class="sa-width-205 sa-line-2">暖宝宝暖贴袋鼠保暖贴暖服帖自发热鞋垫暖足贴暖宝宝暖贴袋鼠保暖贴暖服帖自发热鞋垫暖足贴</div>
            <div class="txt sa-m-t-10">采购价<span class="price">￥23.40</span></div>
            <div class="txt">月销量 1万+</div>
            <div class="sa-flex sa-m-t-5 sa-m-b-5">
              <div class="tag">7天退换</div>
              <div class="tag">鲸囍自营</div>
            </div>
            <div class="btn">一键铺货</div>
          </div>
        </template>
      </div>

      <!-- 铺货设置 -->
      <div v-if="tabIndex==2" class="sa-p-20">
        <div class="top-tip">
          <div class="title">请先完成批量铺货设置确认</div>
          <div class="dec">首次铺货需要先确认铺货设置，发货时效，售后服务和运费模板都可在铺货设置中调整或者编辑，
            官方货源铺货后，以上三个信息与货源保持一致。</div>
        </div>
        <el-form  ref="formRef" :model="form.model" :rules="rules">
          <el-form-item label="鲸囍价" prop="a1" >
            采购价 x ( 1 + <el-input class="sa-width-50" v-model="form.model.a1" type="number" placeholder="" /> % ) 元
            
          </el-form-item>
          <el-form-item label="抹零方式" prop="a2">
            <el-radio-group v-model="form.model.a2">
              <el-radio value="2">保留分角</el-radio>
              <el-radio value="1">向上取整元</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="发货时效" prop="a3">
            <el-select v-model="form.model.a3" placeholder="请选择发货时效">
              <el-option label="当日发货" value="0" />
              <el-option label="24小时发货" value="1" />
              <el-option label="48小时发货" value="2" />
              <el-option label="3天发货" value="3" />
              <el-option label="5天发货" value="4" />
            </el-select>
          </el-form-item>
          <el-form-item label="售后服务" prop="a4">
            <el-select v-model="form.model.a4" placeholder="请选择售后服务">
              <el-option label="支持7天无理由退货" value="0" />
              <el-option label="支持15天无理由退货" value="1" />
              <el-option label="支持30天无理由退货" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="运费模板">
            卖家包邮
          </el-form-item>

          <el-form-item label="铺货状态" prop="a5">
            <el-radio-group v-model="form.model.a5 ">
              <el-radio value="2">铺货成功直接上架</el-radio>
              <el-radio value="1">铺货成功后到待售</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="限购地区">
            信息不同步（部分货源可能有地区限购）
          </el-form-item>

          <el-form-item label="库存信息">
            不能单独维护库存，自动同步货源库存
          </el-form-item>
         
          
        </el-form>
      </div>
      


    </el-main>
    <sa-view-bar v-if="tabIndex==0">
      <template #right>
        <sa-pagination :pageData="pageData" @updateFn="getData" />
      </template>
    </sa-view-bar>

    <el-footer v-if="tabIndex==2" class="sa-footer--submit">
      <el-button  type="primary" @click="confirm">保存设置</el-button>
    </el-footer>
    <el-footer  class="sa-footer--submit">
      <el-button   @click="emit('modalCallBack', {
          event: 'confirm',
        });">关闭</el-button>

    </el-footer>
  </el-container>
</template>
<script>
  export default {
    name: 'seller.admin.applicationbd',
  };
</script>

<script setup>
  import { onMounted, reactive,ref,unref } from 'vue';
  import { api } from '@/app/seller/admin/applicationbd/applicationbd.service';
  import { usePagination, useModal } from '@/sheep/hooks';
  import { useRoute } from 'vue-router';
  import _ from 'lodash';
  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: {
      type: Object,
    },
  });
  const statusList = [
    { name: '铺货记录', value:0 },
    { name: '收藏夹', value: 1 },
    { name: '铺货设置', value: 2 },
  ];
  const buttonList = [
    { name: '全部', value:0,num:0 },
    { name: '铺货成功', value: 1,num:0 },
    { name: '铺货失败 ', value: 2,num:0 },
    { name: '货源失败 ', value: 2,num:0  },

  ];
  const formRef = ref();
  const form = reactive({
    model: {
      status: '1',
      remark: '',
    },
  });
  const rules = reactive({
    a1: [
      { required: true, message: '请输入', trigger: 'blur' },
    ],
    a2: [
      { required: true, message: '请选择', trigger: 'blur' },
    ],
    a3: [
      { required: true, message: '请选择', trigger: 'blur' },
    ],
    a4: [
      { required: true, message: '请选择', trigger: 'blur' },
    ],
    a5: [
      { required: true, message: '请选择', trigger: 'blur' },
    ],
  });
  const route = useRoute();
  
  const tabIndex=ref(0)
  const btnIndex=ref(0)

  


  const table = reactive({
    loading: false,
    data: [],
  });

  const { pageData } = usePagination();

  function tabChange(e){
    console.log(e)
    tabIndex.value=e
    if(e==0){
      getData(1)
    }
    
  }
 

  async function getData(page) {
    table.loading = true;
    if (page) pageData.page = page;
   
    const { error, data } = await api.list({
      page: pageData.page,
      list_rows: pageData.list_rows,
      // type:buttonList[btnIndex.value].value//全部-铺货成功...
    });
    if (error === 0) {
      table.data = data.data;
      pageData.page = data.current_page;
      pageData.list_rows = data.per_page;
      pageData.total = data.total;
    }
    table.loading = false;
  }

  function btnHandle(index){
    btnIndex.value=index
    getData(1)
  }
  function confirm() {
    unref(formRef).validate(async (valid) => {
      if (!valid) return;
      const { error } = await api.audit(props.modal.params.id, form.model);
      if (error === 0) {
        emit('modalCallBack', { event: 'confirm' });
      }
    });
  }

  

  onMounted(() => {
    tabIndex.value= props.modal.params.tabIndex
    if(tabIndex.value==0){
      getData();
    }
  });

</script>
<style lang="scss">
.el-form-item__label{
  font-size: 16px!important;
}
  .tag{
    padding:5px 10px;
    background: #F7F7F7;
    color:#5A5A5A;
    font-size: 16px;
    margin-right:20px;
    cursor: pointer;
  }
  .tag-active{
    background: #EBF0FF;
    color: #3662EC;
  }
  .shop-image {
      width: 68px;
      height: 65px;
      margin-right: 10px;
      flex-shrink: 0;

    }
  
  .collect-box{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    
    .collect-item{
      margin-bottom:20px;
      .collect-image{
        width: 204px;
        height: 207px;
        flex-shrink: 0;
      }
      .txt{
        font-family: Source Han Sans;
        font-size: 14px;
        color: #9E9E9E;
      }
      .price{
        font-family: Source Han Sans;
        font-size: 18px;
        color: #ED2828;
      }
      .tag{
        padding:4px;
        font-family: Source Han Sans;
        font-size: 14px;
        line-height: normal;
        color: #3768FA;
        border-radius: 4px;
        background: #F2F6FE;
        margin-right:6px;
      }
      .btn{
        border-radius: 10px;
        background: rgba(216, 216, 216, 0);
        box-sizing: border-box;
        border: 3px solid #3768FA;
        width: 202px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-family: Source Han Sans;
        font-size: 16px;
        font-weight: bold;
        color: #3768FA;
      }
    }
  }
  .top-tip{
    width: 1025px;
    height: 120px;
    background: #F3F6FF;
    padding:10px 20px;
    .title{
      font-family: Source Han Sans;
      font-size: 20px;
      font-weight: bold;
      color: #141414;
    }
    .dec{
      width:800px;
      font-family: Source Han Sans;
      font-size: 16px;
      color: #AFAFAF;
    }
  }
  .shop-tag{
    border-radius: 4px;
    background: linear-gradient(270deg, #070707 0%, rgba(7, 7, 7, 0) 174%);
    padding:2px 5px;
    font-family: Source Han Sans;
    font-size: 12px;
    font-weight: bold;
    color: #C8BDAD;
    flex-shrink: 0;
    display: inline-block;

  }
  .shop-title{
    display: inline;
  }
  .txt{
    font-family: Source Han Sans;
    font-size: 12px;
    font-weight: 500;
    color: #9E9E9E;
  }
  .success {
    color: #67C23A;
  }

  .fail {
    color: #FA5151;
  }

  .ing {
    color: #FFC300;
  }
  .dot{
    width: 10px;
    height: 10px;
    background: #3662EC;
    border-radius: 50%;
    margin-right:8px
  }
</style>